"side btn"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="side-bar" data-toggle="modal" data-target="#myModal">ENQUIRY</div> <div class="bell-icon hidden-lg hidden-md"> <a href="tel:+917278890983" onclick="ga('send', 'event','Mailto Tracking: someone@example.com','Click/Touch');"> <img src="http://eventophotography.com/wp-content/themes/eventoPhotography/main/img/icons/call-naw.png" alt="call-naw"> </a> </div> <a href="https://wa.me/+919831358493"> <div class="section-whatsapp"> <i class="fa fa-whatsapp" aria-hidden="true"></i> </div> </a> </div> </div> <!-- side tab --> <table class="side-tab"> <tr> <td><a href="#"><center><img src="img/phone.svg" style="border-bottom: 1px solid #d6d6d6;"></center></a></td> </tr> <tr> <td><a href="#"><center><img src="img/whatsapp.svg" style="border-bottom: 1px solid #d6d6d6;"></center></a></td> </tr> <tr> <td><a href="#"><center><img src="img/smartphone.svg" style="width:25px;"></center></a></td> </tr> </table>
.side-bar { float: right; transform: rotate(-90deg); right: -15px; position: fixed; top: 80px; background-color: #72b74c; padding: 10px 25px; font-weight: 500; border-top-left-radius: 5px; border-top-right-radius: 5px; letter-spacing: .5px; color: #fff; z-index: 9; cursor: pointer; transition: all .5s ease-in-out; } .bell-icon img { position: fixed; z-index: 100; width: 52px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); border-radius: 50px; top: 60%; left: 2%; } .section-whatsapp { background-color: #72b74c; width: 50px; height: 50px; right: 20px; border-radius: 50%; bottom: 30px; color: #fff; text-align: center; line-height: 50px; font-size: 30px; position: fixed; z-index: 1000000; } /* ----------- side-tab ----------- */ .side-tab{ width: 60px; position: fixed; top: 25%; right: 0; z-index: 1000; background: #fff; box-shadow: 0px 1px 12px 0px rgb(0 0 0 / 12%); } .side-tab tr td img{ width:20px; padding-top:25px; padding-bottom:25px; }

Related: See More


Questions / Comments: